<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 客户信息
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <!-- <el-button
                    type="primart"
                    icon="el-icon-delete"
                    class="handle-del mr10"
                    @click="delAllSelection"
                    >批量删除</el-button 
                >-->
                <el-input
                    v-model="query.customerName"
                    placeholder="客户名称"
                    class="handle-input mr10"
                ></el-input>
                <el-input
                    v-model="query.customerAddress"
                    placeholder="客户地址"
                    class="handle-input mr10"
                ></el-input>
                <el-select v-model="value" placeholder="客户状态">
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        @click="statusShow(value)">
                    </el-option>
                </el-select>&nbsp;
                <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>&nbsp;
                <el-button type="primary" @click="addSearch">添加</el-button>
            </div>
            <el-table
                :data="tobleData"
                border
                class="table"
                ref="multipleTable"
                height="500px"
                header-cell-class-name="table-header"
                @selection-change="handleSelectionChange"
            >
                <el-table-column
                    type="selection"
                    width="40"
                    align="center"
                ></el-table-column>
                <el-table-column
                    property="id"
                    label="ID"
                    width="50"
                    align="center"
                ></el-table-column>
                <el-table-column
                    property="region"
                    label="省市区信息"
                    width="70"
                    align="center"
                    :formatter="rgn"
                ></el-table-column>
                <el-table-column
                    property="classification"
                    label="客户分类"
                    width="50"
                    align="center"
                    :formatter="cfn"
                ></el-table-column>
                <el-table-column
                    property="customerName"
                    label="客户名称"
                    width="50"
                    align="center"
                ></el-table-column>
                <el-table-column
                    property="customerAddress"
                    label="客户地址"
                    width="50"
                    align="center"
                ></el-table-column>
                <el-table-column
                    property="contact"
                    label="联系人"
                    width="50"
                    align="center"
                ></el-table-column>
                <el-table-column
                    property="telephone"
                    label="客户电话号码"
                    width="70"
                    align="center"
                ></el-table-column>
                <el-table-column
                    property="introduce"
                    label="客户介绍"
                    width="50"
                    align="center"
                ></el-table-column>
                <el-table-column
                    property="description"
                    label="跟单描述"
                    width="50"
                    align="center"
                ></el-table-column>
                <el-table-column
                    property="isDeal"
                    label="是否成交"
                    width="50"
                    align="center"
                    :formatter="idl"
                ></el-table-column>
                <el-table-column
                    property="status"
                    label="状态"
                    width="50"
                    align="center"
                    :formatter="fgf"
                ></el-table-column>
                <el-table-column
                    property="sort"
                    label="排序"
                    width="50"
                    align="center"
                ></el-table-column>
                <el-table-column
                    property="createdDate"
                    label="创建日期"
                ></el-table-column>
                <el-table-column
                    property="modifiedDate"
                    label="更新日期"
                ></el-table-column>
                <el-table-column label="操作" align="center">
                    <template #default="scope">
                        <el-button
                            type="text"
                            icon="el-icon-edit"
                            @click="handleEdit(scope.$index, scope.row)"
                            >编辑</el-button>
                        <el-button
                            type="text"
                            icon="el-icon-delete"
                            class="red"
                            @click="handleDelete(scope.$index, scope.row)"
                            >删除</el-button> 
                        <!--  <el-button type="text" @click="open(scope.$index, scope.row)"
                            >删除</el-button
                        > -->
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageIndex"
                    :page-sizes="[2,4,6,8]"
                    :page-size="pageSize"
                    layout="total,sizes,prev,pager,next,jumper"
                    :total="pageTotal"
                >
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
import { ShowCustomer } from "../../api/customer.js";

export default {
    name: "CustomerShow",
    data() {
        return {
            query: {
                customerName: "",
                customerAddress: "",
                status: 1,
                pageIndex: 1,
                pageSize: 4,
            },
            options: [
                {
                    value: "1",
                    label: "登录",
                },
                {
                    value: "0",
                    label: "登出",
                },
            ],
            tobleData: [],
            multipleSelection: [],
            delList: [],
            pageTotal: 0,
            idx: -1,
            id: -1,
        };
    },
    created() {
        this.Show();
    },
    methods: {
        fgf(row) {
            if (row.status == "1"){
                return <span style="color:green">登录</span>;
            } else {
                return <span style="color:red">登出</span>;
            }
        },
        idl(row) {
            if (row.isDeal == "1"){
                return <span style="color:green">是</span>;
            } else {
                return <span style="color:red">否</span>;
            }
        },
        cfn(row) {
            if (row.classification == "1"){
                return <span style="color:green">A类</span>;
            } else if (row.classification == "2"){
                return <span style="color:red">B类</span>;
            } else {
                return <span style="color:blue">C类</span>;
            }
        },
        rgn(row) {
            if (row.region == "1"){
                return <span style="color:green">上海市</span>;
            } else {
                return <span style="color:red">北京市</span>;
            }
        },
        Show() {
            ShowCustomer({
                PageSize: this.query.pageSize,
                PageIndex: this.query.pageIndex,
                CustomerName: this.query.customerName,
                CustomerAddress: this.query.customerAddress,
                Status: this.query.status,
            }).then((res) => {
                console.log(res.data);
                this.tobleData = res.data.pagedData;
                this.pageTotal = res.data.totalCount;
            });
        },
        handleSearch() {
            this.Show();
        },
        statusShow(value) {
            if (value == 1) {
                this.query.status = 1;
                this.Show();
            } else {
                this.query.status = 0;
                this.Show();
            }
        }
    },
}
</script>
<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}

.table {
    width: 100%;
    font-size: 14px;
}

.red {
    color: #ff0000;
}

.mr10 {
    margin-right: 10px;
}

.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>